<template>
  <div>
    <el-select
      v-model="selectedOptions"
      multiple
      placeholder="请选择"
      @visible-change="handleVisibleChange"
      class="custom-select"
      popper-class="custom-select-dropdown"
    >
      <!-- 自定义内容 -->
      <template v-slot="dropdown">
        <!-- 搜索框 -->
        <el-input
          v-model="searchQuery"
          placeholder="请输入搜索内容"
          clearable
          @input="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" size="small" >搜索</el-button>
        </el-input>

        <!-- 滚动的选项区域 -->
        <div class="options-container">
          <el-option
            v-for="item in paginatedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </div>

        <!-- 分页部分，固定到底部 -->
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePageChange"
          />
        </div>
      </template>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],  // 已选择的选项
      allOptions: [],       // 所有可选项
      filteredOptions: [],  // 过滤后的选项
      paginatedOptions: [], // 当前页的选项
      total: 0,             // 总条目数
      currentPage: 1,       // 当前页数
      pageSize: 3,          // 每页显示条目数
      searchQuery: '',      // 搜索关键字
    };
  },
  methods: {

    模拟调用接口返回数据(){
      let arr = []
      //模拟数据
      for (let i = 1; i <= pageSize; i++) {
        arr.push({value:"value-"+this.currentPage+'-'+i, label:"label-"+this.currentPage + '-'+i})
      }
      return arr;
    },

    //加载数据
    loadData(){
      let arr = this.模拟数据()
      this.allOptions = arr
      this.filteredOptions = arr; // 初始显示所有数据
      this.total = 100;    // 更新总数

    },

    // 模拟异步加载数据
    fetchOptions() {
      const allData = [
        { value: 1, label: 'China Aim Investment' },
        { value: 2, label: 'GF International Asset Management' },
        { value: 3, label: 'GF International Investment' },
        { value: 4, label: 'Greg' },
        { value: 5, label: 'HUANENG-YUDEAN' },
        { value: 6, label: 'Huaneng Hong Kong' },
        { value: 7, label: 'Li zhaorui' },
        { value: 8, label: 'MACKENZIE FINANCIAL' },
        { value: 9, label: 'Manulife Asset Management' },
        { value: 10, label: 'Manulife Financial Asia' },
        // 添加更多数据
      ];

      this.allOptions = allData;
      this.filteredOptions = allData; // 初始显示所有数据
      this.total = allData.length;    // 更新总数
      this.updatePaginatedOptions();  // 初始化加载第一页
    },
    // 更新当前页的选项
    updatePaginatedOptions() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.paginatedOptions = this.filteredOptions.slice(start, end);
    },
    // 分页切换时触发
    handlePageChange(page) {
      this.currentPage = page;
      this.updatePaginatedOptions();  // 更新当前页显示的数据
    },
    // 搜索功能处理
    handleSearch() {
      if (this.searchQuery.trim()) {
        // 根据搜索关键字过滤
        this.filteredOptions = this.allOptions.filter(item =>
          item.label.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      } else {
        // 如果搜索框为空，则显示所有数据
        this.filteredOptions = this.allOptions;
      }
      this.total = this.filteredOptions.length; // 更新过滤后的总数
      this.currentPage = 1; // 重置到第一页
      this.updatePaginatedOptions();  // 根据搜索结果更新分页选项
    },
    // 下拉框展开时触发
    handleVisibleChange(visible) {
      if (visible) {
        this.fetchOptions();  // 模拟加载数据
      }
    }
  }
};
</script>

<style scoped>
/* 自定义下拉框的样式 */
.custom-select-dropdown {
  max-height: 650px;
  padding-bottom: 70px; /* 预留分页按钮的空间 */
}

/* 搜索框的样式 */
.el-input {
  width: 100%;
  margin-bottom: 10px;
}

/* 可滚动的选项区域 */
.options-container {
  max-height: 400px; /* 设置一个合适的高度来滚动 */
  overflow-y: auto;
}

/* 分页部分固定在底部 */
.pagination-container {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  text-align: center;
}
</style>
